<template>
	<view class="page-box">
		<view class="header">
			<text class="header-logo iconfont icon-logo"></text>
			<view class="header-title">拼一手珠宝平台</view>
			<view class="header-sub">用互联网科技赋能传统珠宝商</view>
			<image class="header-image-l" :src="'tree.png' | media('xc200')" mode=""></image>
			<image class="header-image-r" :src="'tree.png' | media('xc200')" mode=""></image>
		</view>
		<view class="body">
			<pys-button
				v-if="type === 'register'"
				width="356"
				height="75"
				open-type="getPhoneNumber"
				size="24"
				@getphonenumber="handleGetPhoneNumber"
			>
				<text class="iconfont icon-weixin"></text>
				微信一键注册
			</pys-button>
			<pys-button v-else width="356" height="75" size="24" @click="login">
				<text class="iconfont icon-weixin"></text>
				微信一键登录
			</pys-button>
			<view style="padding-top: 32rpx;"></view>
			<pys-button
				v-if="type === 'register'"
				outline
				width="356"
				height="75"
				size="24"
				@click="onCancel"
			>
				取消注册
			</pys-button>
			<pys-button v-else outline width="356" height="75" size="24" @click="onCancel">
				取消登录
			</pys-button>
		</view>
		<view class="footer" @click="isAgree = !isAgree">
			<pys-icon
				v-if="isAgree"
				class="box-rule-radio-icon"
				name="check-circle-fill"
				size="24"
			/>
			<pys-icon v-else class="box-rule-radio-icon" name="check-circle" size="24" />
			<view style="margin-left: 8rpx;">
				同意
				<text class="text-primary">《网络服务协议》</text>
				及
				<text class="text-primary">《隐私保护声明》</text>
			</view>
		</view>

		<view v-if="showAuthUserInfo" class="modal" @touchmove.stop.prevent>
			<view class="modal-mask"></view>
			<view class="modal-box">
				<view class="modal-box-hd">
					<view class="circle-lg">
						<view class="circle-sm"><text class="iconfont icon-avatar"></text></view>
					</view>
				</view>
				<view class="modal-tips" style="margin-bottom: 12rpx;">申请获得您的公开信息</view>
				<view class="modal-tips" style="margin-bottom: 24rpx;">（包括头像、昵称等）</view>
				<!-- <pys-button
					width="316"
					height="60"
					size="24"
					open-type="getUserInfo"
					@getuserinfo="handleGetUserInfo"
				>
					确认授权
				</pys-button> -->
				<pys-button
					width="316"
					height="60"
					size="24"
					@click="handleGetUserInfo"
				>
					确认授权
				</pys-button>
			</view>
		</view>
	</view>
</template>

<script>
import { wxLogin, getUserInfo, getPhoneNumber, resetLoginStart } from '@/config/login';

export default {
	name: 'MpLogin',
	data() {
		return {
			showAuthUserInfo: false,
			phoneDetail: null,
			userInfoDetail: null,
			type: 'register',
			isAgree: false
		};
	},
	//方法
	methods: {
		onCancel() {
			uni.navigateBack();
		},
		handleGetPhoneNumber(e) {
			if (e.errMsg == 'getPhoneNumber:ok') {
				let phoneInfo = e;
				uni.showLoading({ title: '加载中' });
				getPhoneNumber(phoneInfo, () => {
					this.showAuthUserInfo = true;
					uni.hideLoading();
				});
			}
		},
		// handleGetUserInfo(e) {
		// 	if (e.errMsg == 'getUserInfo:ok') {
		// 		let info = e.userInfo;
		// 		getUserInfo(info, () => {
		// 			this.handleSuccess();
		// 		});
		// 	}
		// },
		handleGetUserInfo() {
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					let info = res.userInfo;
					getUserInfo(info, () => {
						this.handleSuccess();
					});
					// this.setData({
					// 	userInfo: res.userInfo,
					// 	hasUserInfo: true
					// })
				 }
			});
		},
		login() {
			this.handleSuccess();
		},
		handleSuccess() {
			uni.showLoading({ title: '加载中' });
			this.$store.dispatch('user/getUserInfo')
				.then(() => {
					this.$store.dispatch('setNotice');
					const pages = getCurrentPages();
					const prePage = pages[pages.length - 2];
					uni.hideLoading();
					uni.reLaunch({
						url: '/pages/home/home/home'
					});
					// uni.reLaunch({
					// 	url: '/pages/user/guide/guide'
					// });
					// uni.reLaunch({
					// 	url: prePage.$page.fullPath
					// });
				});
		}
	},
	onLoad(e) {
		this.type = e.type;
	},
	onUnload() {
		resetLoginStart();
	}
};
</script>
<style lang="scss" scoped>
.page-box {
	padding: 176rpx 0 16rpx;
	background-color: #fff;
	justify-content: space-between;
	align-items: center;
}
.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: $type-primary;
	
	&-logo {
		font-size: 200rpx;
		line-height: 200rpx;
		margin-bottom: 8rpx;
	}
	&-title {
		font-size: 36rpx;
		font-weight: bold;
		line-height: 36rpx;
		margin-bottom: 16rpx;
	}
	&-sub {
		font-size: 30rpx;
		line-height: 30rpx;
	}
	&-image-r, &-image-l {
		position: absolute;
		width: 395rpx;
		height: 395rpx;
		opacity: 0.15;
	}
	&-image-r {
		top: 20rpx;
		right: -214rpx;
		transform: rotate(-90deg);
	}
	&-image-l {
		top: 0;
		left: -214rpx;
		transform: rotate(90deg);
	}
}

.icon-weixin {
	font-size: 40rpx;
	line-height: 40rpx;
	margin-right: 16rpx;
}

.footer {
	display: flex;
	align-items: center;
	padding: 24rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #aaa;
}

.modal {
	position: fixed;
	top: var(--window-top);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: $z-index-modal;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-mask {
	position: fixed;
	top: var(--window-top);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: $z-index-modal;
	background-color: rgba($color: #000000, $alpha: 0.5);
}
.modal-box {
	z-index: $z-index-modal + 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 440rpx;
	padding: 48rpx 0;
	background: #ffffff;
	border-radius: 16rpx;

	&-hd {
		position: relative;
	}
}
.circle-lg {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 242rpx;
	height: 242rpx;
	margin-bottom: 48rpx;
	background-color: rgba($color: $type-primary, $alpha: 0.18);
	border-radius: 50%;
}
.circle-sm {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 152rpx;
	height: 152rpx;
	background-color: rgba($color: $type-primary, $alpha: 0.43);
	border-radius: 50%;
}
.icon-avatar {
	font-size: 64rpx;
	line-height: 64rpx;
	color: #fff;
}
.modal-tips {
	font-size: 24rpx;
	line-height: 24rpx;
	color: $type-primary;
}
</style>
